<template>
<div class="box">
  
  <div class="Top"><h2>待办事项</h2></div>
  <div class="Title"><input class="sr" type="text" placeholder="请输入任务,回车确认" v-model="num" @keyup.enter="search"></div>
  <!-- <span v-show="TangBo">最多输入10个数量且不可输入空值</span> -->
  <div class="Body ab" >
    <ul>
      <li v-for="(item,index) in Arr" :key="index">
        <div class="ch">
          <input type="checkbox" class="che"v-model=item.stutas>
          <span>{{ item.content }} </span>
        </div>
        <input class="btnDel" type="button" value="删除" @click="Delt(index)">
      </li>
    </ul>
  </div>
  <div class="Bottom">
    <div class="left"><label for="">总计:{{ arr.length }}</label></div>
    <div class="right">
      <input type="button" value="全部" @click="All">
      <input type="button" value="已完成" @click="UnDone">
      <input type="button" value="未完成" @click="Done">
      <input type="button" value="一键扫荡"@click='SaoDang'>
    </div>
  </div>

</div>
</template>
<script setup>
import { ref,computed,onMounted } from 'vue';
let num=ref('')
let filterString=ref('all')

let TangBo=computed(()=>{
 let Tb=num.value.trim()
 return Tb.length>10||Tb.length<=0
})
let arr=ref([])
let Arr=computed(()=>{
  if(filterString.value==='all'){
    return arr.value
  }
  if(filterString.value==='undone'){
    return arr.value.filter(item=>item.stutas)
  }
  if(filterString.value==='done'){
    return arr.value.filter(item=>!item.stutas)
  }
  if(filterString.value==='sd'){
    if(confirm('你确定这样做吗？也许再也见不到它们了')){
      let sj=arr.value=[]
      alert('扫荡成功')
      return sj
    }else
    {
      alert('扫荡失败')
      return arr.value
    }
  }
})
function All() {
  filterString.value='all'
  
}
function UnDone() {
  filterString.value='undone'
  
}
function Done() {
  filterString.value='done'
  
}
function SaoDang(){
  filterString.value='sd'
}
function checkOverflow(){
  const bodyEl = document.querySelector('.Body');
  return bodyEl.scrollHeight > bodyEl.clientHeight;
}
const search=()=>{
  if(TangBo.value){
    alert('最多输入10个数量且不可输入空值!')
    return
  }
 if(checkOverflow()){
    alert('任务已满，请完成或取消任务继续下一步操作')
    return
 }

  
  let temObj={
    content:num.value,
    stutas:false
  }
  arr.value.push(temObj)
  num.value=''
}
const Delt=(index)=>{
  if(confirm('你确定放弃这个任务吗？')){
    arr.value.splice(index,1)
    console.log('删除成功');
  }else{
    console.log('取消删除');
    
  }
}
</script>
<style>
*{
  margin: 0px;
  padding: 0px;
}
#app{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box{
  display: flex;
  height: 800px;
  max-height: 800px;
  width: 1200px;
  background-color: #cbdfd9;
  flex-direction: column
}
.Title,
.Top,
.Bottom{
  height: 62px;
}
.Top{
  display: flex;
  justify-content:center ;
  align-items: center;
}
.Title{
  display: flex;
}
.sr{
  flex: 1;
  padding-left: 16px;
  font-size: 18px;
}
.box>div{
 
  border: 1px solid;
  border-radius:3px ;
}
.ab{
  flex: 1;
}
.Bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left{
  margin-left: 12px;
}
.right>input{
  margin: 6px;
}
.Body ul{
  list-style: none;
}
.Body ul li{
  display: flex;
    justify-content: space-between;
    border-radius: 10px 10px 10px 10px;
    background-color: rgb(153, 184, 202);
    padding: 10px;
    margin: 3px;
}
.che{
  margin: 10px;
}
.btnDel{
  margin-right: 20px;
  border: none;
  background-color:rgb(177, 209, 179);
  display: none;
  font-size: 16px;
}
.Body ul li:hover .btnDel{
 display: inline;
 background-color: antiquewhite;
}
.btnDel:hover{
  color: rgb(118, 173, 155);
}
.Body ul li:hover{
 background-color: antiquewhite;
}
.Top{
  background-color: rgb(247, 244, 116);
}
.ch input[type=checkbox]:checked+span{
  text-decoration: line-through;
}
.Body {
  overflow: hidden;
  max-height: calc(100% - 124px); /* 动态计算剩余高度 */
}

</style>